<!-- 个人中心 -->
<template>
  <view class="container">
    <view class="box">
      <view class="box1">
        <view class="boxtitle">头像</view>
        <view>
          <u-avatar @click="chooseAvatar" size="70" :src="url || vuex_user.avatar"></u-avatar>
        </view>
      </view>
      <view class="box1">
        <view class="boxtitle">性别</view>
        <view class="boxyou" style="text-align: right;">
          <view class="boxyou" @click="showSexSelect()">{{vuex_user.gender==0?'男':'女'}}</view>
        </view>
      </view>
      <view class="box1">
        <view class="boxtitle">年龄</view>
        <view class="boxyou"><input placeholder="未填写" v-model="vuex_user.age" type="number" class="uni-input" style="text-align: right;" /></view>
      </view>
      <!-- 			<view class="box1">
				<view class="boxtitle">安全手机</view>
				<view class="boxyou">{{vuex_user.mobile}}</view>
			</view> -->
      <view class="boxbottom">
        <view class="boxtitle">个性签名</view>
        <view class="boxyou" style="text-align: right;"> <input placeholder="这家伙很懒,什么也没写!" v-model="vuex_user.bio" class="uni-input" /></view>
        <!-- <view class="boxyou"></view> -->
      </view>
    </view>
    <view class="u-p-30">
      <u-button type="primary" hover-class="none" :custom-style="{ backgroundColor: theme.bgColor, color: theme.color }" @click="submit()">保存资料</u-button>
    </view>
    <u-action-sheet v-model="showSex" :list="actions" title="请选择性别" description="如果选择保密会报错" @close="showSex = false" @click="sexSelect">
    </u-action-sheet>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showSex: false,
      actions: [{
        text: '男',
        color: '',
        fontSize: ''
      },
      {
        text: '女',
        color: '',
        fontSize: ''
      }
      ],
      url: '',
      gender: ''
    };
  },
  onShow() {
    if (this.vuex_token) {
      this.getUserIndex();
    } else {
      this.$u.vuex('vuex_user', {});
    }
    //移除事件监听
    uni.$off('uAvatarCropper', this.upload);
  },
  methods: {
    chooseAvatar() {
      uni.$on('uAvatarCropper', this.upload);
      // 此为uView的跳转方法，详见"文档-JS"部分，也可以用uni的uni.navigateTo
      this.$u.route({
        // 关于此路径，请见下方"注意事项"
        url: '/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
        // 内部已设置以下默认参数值，可不传这些参数
        params: {
          // 输出图片宽度，高等于宽，单位px
          destWidth: 300,
          // 裁剪框宽度，高等于宽，单位px
          rectWidth: 200,
          // 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
          fileType: 'jpg',
        }
      })
    },
    upload: async function(path) {
      uni.$off('uAvatarCropper', this.upload);
      // 可以在此上传到服务端
      try {
        let res = await this.$api.goUpload({
          filePath: path
        });
        this.url = res.data.fullurl;
        this.vuex_user.avatar = res.data.fullurl
      } catch (e) {
        console.error(e);
        this.$u.toast('图片上传失败！');
      }
    },
    showSexSelect() {
      this.showSex = true
    },
    sexSelect(e) {
      this.vuex_user.gender = e;
    },
    getUserIndex: async function() {
      let res = await this.$api.getUserIndex();
      uni.stopPullDownRefresh();
      if (res.code == 1) {
        this.$u.vuex('vuex_user', res.data.userInfo || {});
        if (this.vuex_user.gender == 0) {
          this.gender = '男'
        } else {
          this.gender = '女'
        }
      } else {
        this.$u.toast(res.msg);
        return;
      }
    },
    async submit() {
      this.vuex_user.username = this.vuex_user.mobile

      console.log('this.vuex_user', this.vuex_user)
      let res = await this.$api.getUserProfile(this.vuex_user);
      if (res.code == 1) {
        uni.showToast({
          title: '提交成功',
          success() {
            uni.navigateBack({
              delta: 1, //返回层数，2则上上页
            })
          }
        })

      }
    }
  },
}
</script>

<style lang="scss" scoped>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.container {
  background: #f5f5f5;
  height: 100vh;
  padding: 30rpx;
}

.box {
  // height: 471rpx;
  background: #ffffff;
  border-radius: 28rpx;
  padding: 30rpx 30rpx 0rpx 30rpx;
}

.box1 {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #f2f2f2;
  align-items: center;
  height: 80rpx;
}

.boxtitle {
  font-size: 28rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #333333;
}

.boxyou {
  font-size: 28rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #999999;
}

.boxbottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80rpx;
}
</style>
